<template>
  <div class="search-page">
    <form >
      <van-search 
        v-model="value"
        placeholder="请输入搜索关键词" 
        background="#ed3651" 
        show-action
        shape="round"
        @focus="(searchResultShow = false)"
        >
          <div slot="left" class="leftIcon" @click="$router.back()">
            <van-icon name="arrow-left" color="#fff"/>
          </div>
          <template #action >
            <van-button class="searchBtn" size="small" round @click="onSearch">搜索</van-button>
            <van-icon class="textClose" name="clear" @click="textCloseBtn" v-if="value.length > 0" />
          </template>
      </van-search>
    </form>
   

    <!-- 搜索结果 -->
    <searchResult
     v-if="searchResultShow"
     :resultValue="value"
    />

    <!-- 联想建议 -->
    <suggeStion 
      v-else-if="value"
      :resultValue="value"
      @toSuggestion="toSuggestion"
    />

    <!-- 搜索历史 -->
    <div 
    class="historyList"
    v-else
    >
      <div class="historyTitle">
        <span>搜索历史:</span>
        <div class="DeleteHistory">
          <van-button 
          size="mini" 
          plain round 
          type="danger"
          v-if="HistoryShow"
          class="allDeleteHistory"
          @click="allDeleteHistory"
          >
          <van-icon name="delete" />
            全部删除
          </van-button>
          <van-button
            size="mini"
            plain 
            round="" 
            type="danger"
            @click="EditHistory"
            >
              <van-icon name="delete" v-if="!HistoryShow" />
                {{HistoryShow? '取消' : '编辑'}}
            </van-button>
        </div>
      </div>
      <div class="historyBox">
        <span 
        v-for="(items,index) in searchHistoryVal" 
        :key="index" 
        @click="HistoryEdit(items,index)"
        >
          <van-icon 
          name="cross"  
          v-if="HistoryShow" 
          />
          <i>{{items}}</i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import searchResult from '@/page/search/children/search-result.vue'
import suggeStion from '@/page/search/children/suggestion.vue'
import { mapState } from 'vuex'
export default {
  name: 'searchPage',
  data() {
    return {
      value: '', // 搜索框的文本
      searchResultShow: false, // 搜索结果的开关 
      HistoryShow: false, // 实力记录的编辑开关
      searchHistoryVal: []
    };
  },
  components: {
    searchResult,
    suggeStion
  },
  mounted() {
    this.searchHistoryVal = this.searchSuggestion
  },
  computed: {
    ...mapState([
      'searchSuggestion'
    ])
  },
 
  methods: {
    onSearch() {
      console.log(this.value);
      this.searchResultShow = true
      // 遍历数组索引，若value值在数组中存在则为在数组中的索引 不存在则为-1
      const historyText = this.searchHistoryVal.indexOf(this.value)
      if(historyText !== -1) {
        this.searchHistoryVal.splice(historyText, 1)
      }
      this.searchHistoryVal.unshift(this.value)
    },

    // 点击删除小图标时清空输入框文字
    textCloseBtn () {
      this.value = ''
    },

    // 点击编辑按钮
    EditHistory() {
      this.HistoryShow = !this.HistoryShow
    },

    // 点击历史记录文本的时候 触发以下事件
    HistoryEdit(items,index) {
      // 当编辑状态是打开的时候 则执行删除行为
      if(this.HistoryShow) {
        this.deleteHistory(index)
      } else {
        // 如果编辑状态是关闭的化，则执行关键字查询行为
        this.value = items
        this.onSearch()
      }
    },
    deleteHistory(val) {
      this.searchHistoryVal.splice(val,1)
    },

    // 点击全部删除
    allDeleteHistory() {
      this.searchHistoryVal = []
      this.HistoryShow = false
    },


    toSuggestion(val) {
      this.value = val
      this.onSearch()
    }
  },
  watch: {
    // 侦听searchHistoryVal数组是否有发生数据变化，有的话则触发以下代码
    searchHistoryVal(val) {
      console.log(val);
      this.$store.commit('TOUTIAO_SEARCHRESULT', val)
    }
  },
}
</script>

<style lang="scss" scoped>
 .search-page {
 /deep/ .van-search {
  position: relative;
  .leftIcon {
    font-size: 50px;
    margin: 4px 15px 0 0;
  }
  .textClose {
    position: absolute;
    right: 166px;
    top: 40px;
    font-size: 30px;
    color: #999;
  }
  .searchBtn {
    position: absolute;
    right: 37px;
    top: 25px;
    background-color: #ed3651;
    font-size: 23px;
    color: #fff;
  }
  }
  .historyList {
    margin: 30px;
    .historyTitle {
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      color: #555;
      .DeleteHistory {
        display: flex;
        align-content: center;
       /deep/ .allDeleteHistory {
        padding: 0 10px;
        margin-right: 30px;
        }
      }
     /deep/ .van-button__text {
      display: flex;
      align-items: center;
      justify-content: center;
       .van-icon {
        font-size: 25px;
        padding-bottom: 3px;
       }
      }
    }
    .historyBox {
      display: flex;
      justify-content: flex-start;
      margin-top: 20px;
    
      span {
        position: relative;
        display: flex;
        align-items: center;
        font-size: 25px;
        height: 45px;
        margin: 0 20px;
        padding: 0 15px;
        border-radius: 20px;
        background-color: rgb(177, 175, 175);
        .van-icon {
          position: absolute;
          top: -4px;
          left: -8px;
          font-size: 20px;
          color: #fff;
          border-radius: 50%;
          background-color: #555;
        }
      }
    }
  }
 }
</style>